<script setup lang="ts">
import {ref, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
const router = useRouter();
const route = useRoute();
const pageEditing = ref(false);
const cancelText = computed(() => {
    const {id} = route.query;
    return id ? '返回' : '取消';
});
const handelCancel = () => {
    router.back();
};
const showSave = computed(() => {
    const {id} = route.query;
    if (!id) {
        return true;
    } else {
        return pageEditing.value;
    }
});
</script>
<template>
    <el-container class="swiper-detail">
        <el-main></el-main>
        <el-footer class="swiper-detail-footer">
            <el-button @click="handelCancel">{{ cancelText }}</el-button>
            <el-button type="primary" v-if="showSave">保存</el-button>
        </el-footer>
    </el-container>
</template>
<style scoped lang="less">
.swiper-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swiper-detail-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>
